<template>
    <div id="container">
        <!-- <slotScope>
            <template v-slot:scope='{a}'>
                <h1 v-for='(item,index) in a' :key='index'>{{item}}</h1>
            </template>
        </slotScope> -->
        <modal :visible="visible" @on-cancel='cancel' @on-confirm="confirm"></modal>

        <button @click='showModal'>点击显示模态框</button>
        <mix-com></mix-com>
    </div>
    
</template>

<script>
import slotScope from '../slotScope'
import modal from '../modal'
import mixCom from '../mixCom'
    export default {
        components:{
            //注册组件
            slotScope,
            modal,
            mixCom
        },
         data(){
            return{
                visible:false
            }
        },
        methods:{
            showModal(){
                this.visible = true
            },
            cancel(){
                this.visible = false
                // alert('已取消')
            },
            confirm(){
                this.visible = false
                // alert('提交成功')
            }   
        }
    }
</script> 